<template>
  <div class="main_box">
    <CommonHeader title="详情查看"></CommonHeader>
    <div class="main_content">
        <div class="quota_item">
          <div class="head">
            <div class="tit">指标排名</div>
            <div class="inx">
              <div class="num1"><span class="title-name">排名</span> 11 <span class="grey">名</span></div>
            </div>
          </div>
          <div class="info flex-around">
            <div>任务数：2800亩</div>
            <div>完成数：233亩</div>
            <div>完成率：8.34%</div>
          </div>
          <div class="footer">
            <div class="footer-text">截至2022-08</div>
            <div class="person">负责人：陈允岳</div>
          </div>
        </div>
        <div class="reason_tit">请求支持理由</div>
        <div class="reason_content">申报内容申报内容申报内容申报内容申报内容申报内容申报内容申报内容申报内容申报内容申报内容申报内容申报内容申报内容申报内容申报内容申报</div>
    </div>
  </div>
</template>

<script>
import CommonHeader from '@/components/commonHeader'
export default {
  // eslint-disable-next-line
  name: 'HelpDetail',
  components: {
    CommonHeader
  },
  data(){
    return{
        query:{}
    }
  },
  computed:{
    formateSignage(){
      return function(id){
        switch(id){
          case '0':
            return 'green'
          case '1':
            return 'red'
          default:
            return  ''
        }
      }
    },
    sliceDate(){
      return function(date){
        if(date && date.length >= 7){
          return date.slice(0,7)
        }else{
          return ''
        }
      }
    }
  },
  created(){
    
  },
  methods: {

  },
}
</script>

<style scoped>
.main_box{
    min-height: 100vh;
    background-color: #f4f5fa;
}
.main_content{
    padding:15px;
    box-sizing: border-box;
}
.quota_item{
  width: 100%;
  background-color: #fff;
  border-radius:8px;
  margin-bottom: 10px;
  text-align: left;
  padding:10px 15px;
  box-sizing: border-box;
}
.quota_item .head{
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  border-bottom:1px solid #efefef;
  padding-bottom: 10px;
}
.quota_item .head .tit {
  max-width: 200px;
  height: 20px;
  font-size: 14px;
  color: #333;
  font-weight: bold;
  border-left: 4px solid #367fff;
  padding-left: 10px;
  box-sizing: border-box;
}
.quota_item .head .inx{
  display: flex;
}
.quota_item .head .num1{
  font-size: 24px;
  color:#4ca5f1;
  font-weight: bold;
  margin-right: 10px;
}
.quota_item .head .num1 .grey{
  color:#bcc0c7;
  font-size:13px;
  font-weight: normal;
  vertical-align: middle;
}
.quota_item .head .num1.red{
  color:#e43c26;
}
.quota_item .head .num1.green{
  color:#5bc55a;
}
.quota_item .head .num1 .title-name{
  color:#bcc0c7;
  font-size:13px;
  font-weight: normal;
  vertical-align: middle;
}
.quota_item .info{
  font-size: 13px;
  color: #A3A7AD;
  margin-top: 16px;
}
.quota_item .footer{
    display: flex;
    justify-content: space-between;
    color: #D3D7E0;
    font-size: 12px;
    margin-top: 8px;
}
.reason_tit{
    text-align: left;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}
.reason_content{
    width: 100%;
    padding:10px;
    background-color: #fff;
    box-sizing: border-box;
    text-align: left;
    font-size:14px;
    color:#333;
}
</style>